<template>
  <div>
    <el-aside width="200px" style="background-color: #f0f9eb; height: 100vh; border: 1px solid #e1f3d8">
      <el-menu router :default-active="this.$route.path">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-location"></i>龙舟文化</template>
          <el-menu-item :index="`/${type}/eventMap`"><i class="el-icon-map-location"></i>2025观赛指南</el-menu-item>
          <el-menu-item :index="`/${type}/history`"><i class="el-icon-notebook-2"></i>历届比赛资料</el-menu-item>
          <el-menu-item :index="`/${type}/eventInfo`"><i class="el-icon-info"></i>赛事信息</el-menu-item>
        </el-submenu>
        
        <!-- 龙舟队特有菜单 -->
        <el-submenu v-if="type === 'team'" index="2">
          <template slot="title"><i class="el-icon-s-flag"></i>赛事管理</template>
          <el-menu-item :index="`/${type}/registerEvent`"><i class="el-icon-edit"></i>赛事报名</el-menu-item>
        </el-submenu>
        
        <!-- 组织者特有菜单 -->
        <el-submenu v-if="type === 'organizer'" index="3">
          <template slot="title"><i class="el-icon-s-management"></i>赛事管理</template>
          <el-menu-item :index="`/${type}/publishEvent`"><i class="el-icon-circle-plus"></i>发布赛事</el-menu-item>
          <el-menu-item :index="`/${type}/reviewRegistration`"><i class="el-icon-document-checked"></i>审核报名</el-menu-item>
        </el-submenu>
        
        <!-- 只在龙舟队和组织者显示个人中心 -->
        <el-submenu index="4">
          <template slot="title"><i class="el-icon-user"></i>个人中心</template>
          <el-menu-item :index="`/${type}/updateInfo`"><i class="el-icon-edit-outline"></i>用户信息</el-menu-item>
          
          <el-menu-item><logout></logout></el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
import Logout from './logout'

export default {
  name: "r-aside",
  components: {
    Logout
  },
  data() {
    return {
      type: null
    }
  },
  created() {
    this.type = sessionStorage.getItem("type")
  }
}
</script>

<style scoped>
.el-menu {
  background-color: #f0f9eb;
}
.el-submenu__title, .el-menu-item {
  color: #333;
}
.el-menu-item.is-active {
  color: #67C23A;
  background-color: #e1f3d8;
}
</style>